<template>
  <span @click="dialog = true">
    <a-icon type="info-circle-o" :style="{ fontSize: '20px' }" />
    <a-modal v-model="dialog" :width="1350" :footer="null">
      <a-table rowKey="id" :columns="columns" :data-source="data" :pagination="pagination" class="mt-4">
        <span slot="agreementDate" slot-scope="agreementDate"> {{ humanizeDate(agreementDate) }}</span>
        <span slot="firstLoanTime" slot-scope="firstLoanTime"> {{ humanizeDate(firstLoanTime) }}</span>
        <span slot="sysEndTime" slot-scope="sysEndTime"> {{ humanizeDate(sysEndTime) }}</span>
        <span slot="totalLoan" slot-scope="totalLoan"> {{ moneyType(totalLoan) }}</span>
        <span slot="projectStage" slot-scope="_, record">
          <state :record="record"></state>
        </span>
        <span slot="operation" slot-scope="_, record">
          <a @click="toDetail(record)">查看</a>
        </span>
      </a-table>
    </a-modal>
  </span>
</template>
<script>
import { rateTypes } from '@/dict'
import { getList } from '@/api/common'
import moment from 'moment'
export default {
  name: 'projects',
  components: {},
  props: ['projectIds'],
  data() {
    return {
      dialog: false,
      columns: [
        { title: '项目编号', width: 120, dataIndex: 'projectNum', key: 'projectNum' },
        { title: '项目地址', dataIndex: 'addr', key: 'addr', width: 110 },
        { title: '客户名称', dataIndex: 'clientName', key: 'clientName' },
        { title: '贷款顾问', dataIndex: 'sysUserName', key: 'sysUserName' },
        {
          title: '初步协议签订日期',
          dataIndex: 'agreementDate',
          key: 'agreementDate',
          scopedSlots: { customRender: 'agreementDate' }
        },
        {
          title: '开始日期',
          dataIndex: 'firstLoanTime',
          key: 'firstLoanTime',
          scopedSlots: { customRender: 'firstLoanTime' },
          width: 110
        },
        {
          title: '结束日期',
          dataIndex: 'sysEndTime',
          key: 'sysEndTime',
          scopedSlots: { customRender: 'sysEndTime' },
          width: 110
        },
        { title: '贷款期限', dataIndex: 'duration', key: 'duration' },
        {
          title: '总金额',
          dataIndex: 'totalLoan',
          key: 'totalLoan',
          scopedSlots: { customRender: 'totalLoan' },
          width: 110
        },
        { title: '货币', dataIndex: 'currency', key: 'currency' },
        { title: '利率(%)', dataIndex: 'rate', key: 'rate' },
        {
          title: '项目状态',
          dataIndex: 'projectStage',
          key: 'projectStage',
          scopedSlots: { customRender: 'projectStage' }
        },
        {
          title: '操作',
          width: 60,
          dataIndex: 'operation',
          key: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      data: [],
      pagination: {
        total: 1,
        pageSize: 5,
        onChange: this.getData
      }
    }
  },
  components: {
    state: () => import('@/views/manage/com/listStatus.vue')
  },
  watch: {
    dialog(v) {
      if (v) {
        this.getData()
      }
    }
  },
  methods: {
    humanizeDate(v) {
      if (v) {
        return moment(v * 1000).format('YYYY-MM-DD') || '--'
      } else {
        return '-'
      }
    },
    moneyType(v) {
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    toDetail(record) {
      this.$router.push({ name: 'manage/detail', query: { id: record.id, addr: record.addr } })
    },
    async getData(page = 1) {
      // console.log(this.projectIds)
      const form = {
        page,
        limit: this.pagination.pageSize,
        projectIds: this.projectIds.join(',')
      }
      const res = await getList(form)
      const data = res.result.data
      this.pagination.total = data.total
      this.data = data.list
      this.data.forEach(el => {
        el.totalLoan = el.loanData.totalLoan
        el.currency = el.loanData.currency
        el.rate = el.loanData.rate
        var i = el.loanData.durationUnit
        el.duration = el.loanData.duration + rateTypes.find(el => el.value == i).text
        el.sysEndTime = el.realEndTime != 0 ? el.realEndTime : el.sysEndTime
        var fee = el.loanData.fee
        fee.forEach(e => {
          if (e.feeType == 1) {
            el.limitFeeRate = e.rate
          } else if (e.feeType == 2) {
            el.commissionRate = e.rate
          } else if (e.feeType == 3) {
            el.otherFee = e.rate
          } else if (e.feeType == 4) {
            el.administrativeFeeRate = e.rate
          }
        })
      })
      this.data.agreementDate = String(this.data.agreementDate)
    }
  }
}
</script>
<style lang="css" scoped>
.ant-table th.gutter {
  display: table-cell !important;
  width: 20px !important;
}
</style>
